<template>
  <div>
    <div>
      {{fullName}}
    </div>
    <h1>
      <span>当前时间：</span>
      <span></span>
    </h1>

  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const firstName = ref<string>('bill')
    const lastName = ref<string>('gates')

    // const fullName = computed(() => `${firstName.value} - ${lastName.value}`)

    // setTimeout(() => {
    //   firstName.value = 'Petter'
    // }, 2000)



    const nowTime = computed(() => new Date())
    console.log(nowTime.value);

    // 2s 后依然是跟上面一样的结果
    setTimeout(() => {
      console.log("end==value:", nowTime.value)
      // nowTime.value = new Date()
      // 还是输出 Sun Nov 14 2021 21:07:00 GMT+0800 (GMT+08:00)
    }, 3000)

    const fullName = computed({
      get() {
        return `${firstName.value} - ${lastName.value}`
      },

      set(nVal: string) {
        console.log("nVal", nVal);
        // return nVal
        // fullName.value = nVal;
        firstName.value = nVal

      },

    })

    console.log("fullName==", fullName.value);
    fullName.value = `ok`
    console.log("fullName==", fullName.value);

    setTimeout(() => {
      fullName.value = `Petter`

      console.log("firstName.value:",firstName.value);
      console.log("fullName.value:",fullName.value);


    }, 2000)


    return {
      fullName
    }

  }
})
</script>

<style scoped>

</style>
